import React, { useCallback, useMemo, useState } from 'react'
import Child1 from './components/Child1'
import Child2 from './components/Child2'
import { useMounted } from './hooks/useMounted'
import { useUpdated } from './hooks/useUpdated'

const App = () => {
  const [title,setTitle] = useState('我是标题')
  const [count,setCount] = useState(0)
  const [obj,setObj] = useState({
    name:'x',
    age:22
  })

useMounted(() => {
  console.log(document.querySelector('h2'))
})

useUpdated(() => {
  console.log('组件更新了')
})
  
  return (
    <div>
      <h2>{title}</h2>
      <input type="text" value={title} onChange={e=>setTitle(e.target.value)}/>
      
      <hr />

      {title.length > 0 && <Child1 title={title}/>}
      {/* <Child2 {...obj}/> */}

    </div>
  )




}

export default App

